<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 工资管理 </el-breadcrumb-item>
                <el-breadcrumb-item>工资修改</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="100px">

                    <el-divider content-position="left">员工信息</el-divider>

                    <el-form-item label="员工编号" prop="tid">
                        <el-input v-model="form.tid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="form.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="员工职位" prop="positionName">
                        <el-input v-model="position.name" disabled></el-input>
                    </el-form-item>

                    <el-divider content-position="left">工资信息</el-divider>

                    <el-form-item label="发放日期">
                        <el-date-picker
                        v-model="form.date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="基础工资" prop="basicSalary">
                        <el-input v-model="form.basicSalary" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="全勤奖" prop="fullAttention">
                        <el-input v-model="form.fullAttention" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="岗位补贴/月" prop="positionSalary">
                        <el-input v-model="form.positionSalary" disabled></el-input>
                    </el-form-item>
                   
                   <el-form-item label="其他补贴/月" prop="subsidy">
                        <el-input v-model="form.subsidy" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="加班(小时)" prop="overTime">
                        <el-input v-model="form.overTime" @change="setOverTimeSalary"></el-input>
                    </el-form-item>

                    <el-form-item label="加班工资" prop="positionName">
                        <el-input v-model="form.overTimeSalary" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="应发工资" prop="totalPay">
                        <el-input v-model="form.totalPay" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="请假(天)" prop="leaveTime">
                        <el-input v-model="form.leaveTime" @change="setLeaveDeduction"></el-input>
                    </el-form-item>

                    <el-form-item label="请假应扣" prop="leaveDeduction">
                        <el-input v-model="form.leaveDeduction" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="迟到(小时)" prop="lateTime">
                        <el-input v-model="form.lateTime" @change="setLateDeduction"></el-input>
                    </el-form-item>

                    <el-form-item label="迟到应扣" prop="lateDeduction">
                        <el-input v-model="form.lateDeduction" disabled></el-input>
                    </el-form-item>
                   
                   <el-form-item label="早退(小时)" prop="earlyTime">
                        <el-input v-model="form.earlyTime" @change="setEarlyDeduction"></el-input>
                    </el-form-item>

                    <el-form-item label="早退应扣" prop="earlyDeduction">
                        <el-input v-model="form.earlyDeduction" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="缺勤(天)" prop="absenceDay">
                        <el-input v-model="form.absenceDay" @change="setOtherDeduction" ></el-input>
                    </el-form-item>

                    <el-form-item label="缺勤应扣" prop="otherDeduction">
                        <el-input v-model="form.otherDeduction" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="税率" prop="taxRate">
                        <el-input v-model="form.taxRate" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="应扣税费" prop="taxSalary">
                        <el-input v-model="form.taxSalary" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="应扣" prop="totalDeduction">
                        <el-input v-model="form.totalDeduction" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="实发" prop="total">
                        <el-input v-model="form.total" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="状态" prop="result">
                        <el-switch
                            style="display: block"
                            v-model="form.result"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="01"
                            inactive-value="00"
                            active-text="已发"
                            inactive-text="未发">
                        </el-switch>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">修改</el-button>
                        <el-button type="warning" @click="reset()" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            param:{},
            position:{},
            salary:{
              
            },
            form: {
                id:'',
                date:'',
                tid:'',
                name:'',
                pid:'',
                basicSalary:'',
                fullAttention:'',
                subsidy:'',
                positionSalary:'',
                overTime:'',
                overTimeSalary:'',
                totalPay:'',
                leaveTime:'',
                leaveDeduction:'',
                lateTime:'',
                lateDeduction:'',
                earlyTime:'',
                earlyDeduction:'',
                absenceDay:'',
                otherDeduction:'',
                totalDeduction:'',
                taxRate:'',
                taxSalary:'',
                total:'',
                result:'',
            }
        };
    },
    created: function () {
        this.init();
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        async init() {
            var a = await this.$http.get('/salary/' + this.id);

            if (a.code == 200) {
                this.salary = a.data;
                this.initForm(this.salary);
                this.getPosition(this.form.pid)
                this.getParam(this.form.pid)
            } else {
                this.$message.error(a.message);
            }
        },

        initForm(salary){
            this.form.id=salary.id;
            this.form.date=salary.date;
            this.form.tid=salary.tid;
            this.form.name=salary.name;
            this.form.pid=salary.pid;
            this.form.basicSalary=salary.basicSalary;
            this.form.fullAttention=salary.fullAttention;
            this.form.subsidy=salary.subsidy;
            this.form.positionSalary=salary.positionSalary;
            this.form.overTime=salary.overTime;
            this.form.overTimeSalary=salary.overTimeSalary;
            this.form.totalPay=salary.totalPay;
            this.form.leaveTime=salary.leaveTime;
            this.form.leaveDeduction=salary.leaveDeduction;
            this.form.lateTime=salary.lateTime;
            this.form.lateDeduction=salary.lateDeduction;
            this.form.earlyTime=salary.earlyTime;
            this.form.earlyDeduction=salary.earlyDeduction;
            this.form.absenceDay=salary.absenceDay;
            this.form.otherDeduction=salary.otherDeduction;
            this.form.totalDeduction=salary.totalDeduction;
            this.form.taxRate=salary.taxRate;
            this.form.taxSalary=salary.taxSalary;
            this.form.total=salary.total;
            this.form.result=salary.result;
        },

        async getPosition(id){
            var d = await this.$http.get("/position/"+id);
               if(d.code==200){
                   this.position=d.data;
               }
        },

        async getParam(pid){
            var d = await this.$http.get("/paramPid/"+pid);
            if (d.code==200) {
                this.param=d.data;
                
            }
        },

        setOverTimeSalary(val){
            this.form.overTimeSalary=this.param.overtimeSalary*val
            this.setTotalPay();
        },
        setLeaveDeduction(val){
            this.form.leaveDeduction=this.param.leaveDeduction*val
            this.setTotalDeduction();
        },
        setLateDeduction(val){
            this.form.lateDeduction=this.param.lateDeduction*val
            this.setTotalDeduction();
        },
        setEarlyDeduction(val){
            this.form.earlyDeduction=this.param.lateDeduction*val
            this.setTotalDeduction();
        },
        setOtherDeduction(val){
            this.form.otherDeduction=this.param.otherDeduction*val
            this.setTotalDeduction();  
        },

        setTotalPay(){
            this.form.totalPay=this.form.basicSalary+this.form.fullAttention+this.form.subsidy+this.form.positionSalary+this.form.overTimeSalary
            this.setTotal();
        },
        setTotalDeduction(){
            this.form.totalDeduction=this.form.leaveDeduction+this.form.lateDeduction+this.form.earlyDeduction+this.form.otherDeduction+this.form.taxSalary
            if (this.form.totalDeduction-this.form.taxSalary===0) {
                this.form.fullAttention=this.param.fullAttention
                this.setTotalPay();
            }
            this.setTotal();
        },
        setTotal(){
            this.form.total=this.form.totalPay-this.form.totalDeduction
        },

         onSubmit(formName) {
            this.form.id = this.id;
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.put('/salary', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },

        reset() {
            this.$confirm('此操作将恢复至未修改前, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.reload
                    this.initForm(this.salary);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }

    }
};
</script>